<template>
  <transition
    :css="false"
    v-on:enter="enter"
    v-on:leave="leave"
  >
    <div class="normalplay" v-show="this.isFullScreen">
      <div class="player-warpper">
        <PlayerHeader></PlayerHeader>
        <PlayerMiddle :currentTime="currentTime"></PlayerMiddle>
        <PlayerBottom :totaltime="totaltime" :currentTime="currentTime"></PlayerBottom>
      </div>
      <div class="playBg">
        <img :src="currentSongs.picUrl" alt="">
      </div>
    </div>
  </transition>
</template>

<script>
import PlayerHeader from './PlayerHeader'
import PlayerMiddle from './PlayerMiddle'
import PlayerBottom from './PlayerBottom'
import { mapGetters, mapActions } from 'vuex'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
export default {
  name: 'normalPlay',
  components: {
    PlayerHeader,
    PlayerMiddle,
    PlayerBottom
  },
  computed: {
    ...mapGetters([
      'isFullScreen',
      'currentSongs'
    ])
  },
  methods: {
    ...mapActions([
      'getLyric'
    ]),
    enter (el, done) {
      Velocity(el, 'transition.shrinkIn', { duration: 500 }, function () {
        done()
      })
    },
    leave (el, done) {
      Velocity(el, 'transition.shrinkOut', { duration: 500 }, function () {
        done()
      })
    }
  },
  watch: {
    currentSongs (newValue, oldValue) {
      this.getLyric(newValue.id)
    }
  },
  props: {
    totaltime: {
      type: Number,
      default: 0,
      required: true
    },
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  }
}

</script>

<style scoped lang="scss">
  @import "../../assets/css/variable";
  @import "../../assets/css/mixin";
  .normalplay{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /*background: pink;*/
    .player-warpper{
      width: 100%;
      height: 100%;
      //@include bg_color();
      /*background: skyblue;*/
    }
    .playBg{
      /*width: 100%;*/
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      img{
        width: 100%;
        height: 100%;
        /*filter: blur(8px);*/
      }
    }
  }
</style>
